<template>
    <div>
        <div class="big-data-container">
            <div class="header"><span>近30天车辆违规类型</span></div>
            <div class="chart-body">
                <div class="top-tab">
                    <div class="tab-item">
                        <span class="title-text">违规总数</span>
                        <span class="number-text">{{chartData.sumCnt}}</span>
                    </div>
                    <div class="tab-item" style="margin-left: 20px;">
                        <span class="title-text">已处理数</span>
                        <span class="number-text">{{chartData.dealtCnt}}</span>
                    </div>
                </div>
                <div class="chart-view" id="leftChart2"></div>
            </div>
        </div>
    </div>
</template>

<script>
import {boardQueryRecentViolationList} from '../../api/board'

const echarts = require('echarts')
export default {
    name: 'leftChart2',
    data(){
        return{
            chart:null,
            chartData:{
                sumCnt:0,
                dealtCnt:0
            },
        }
    },
    methods:{
        initChart(){
            this.chart = echarts.init(document.getElementById('leftChart2'))
            const option = {
                color:['#53B95D','#656565','#434142'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle:{
                            type:'solid',
                            width:10,
                            color:'rgb(255,255,255,0.1)'
                        }
                    }
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '4%',
                    top:'3%',
                    containLabel: true
                },
                xAxis: {
                    // show: false,
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    // axisLine:{
                    //     show:false
                    // },
                    // axisLabel:{
                    //     show: false
                    // },
                    splitLine:{
                        show:false
                    }

                },
                yAxis: {
                    type: 'category',
                    data: [],
                    axisLine: {show:false},
                    axisTick: {show:false},
                    axisLabel:{
                        show:false
                    },
                    inverse:true

                },
                series: [
                    {
                        name: '违规总数',
                        type: 'bar',
                        stack:'近30天车辆违规类型',
                        data: [],
                        showBackground:true,
                        backgroundStyle:{
                            color:'rgba(255,255,255,0.1)'
                        },
                        label:{
                            show:true,
                            formatter:(item)=>{
                                // return '00'+(item.dataIndex + 1)+'\t\t\t'+item.name
                                return item.name
                            },
                            position:[0, 0],
                            color:'#fff',
                            verticalAlign: 'bottom'
                        },
                        barWidth:10
                    },
                    // {
                    //     name: '总用电',
                    //     type: 'bar',
                    //     stack:'医院类能耗排名统计',
                    //     data: [352, 35, 34, 99, 43, 32],
                    //     barWidth:10
                    // },
                    // {
                    //     name: '已处理数',
                    //     type: 'bar',
                    //     stack:'近30天车辆违规类型',
                    //     data: [333, 32, 333, 32, 32, 33],
                    //     barWidth:10
                    // }
                ]
            }
            this.chart.setOption(option)
        },
        getData(){
            const param = {}
            boardQueryRecentViolationList(param).then(response =>{
                this.chartData = response.data.data
                this.setChartData(response.data.data)
            }).catch(error => {
                console.log(error)
            })
        },
        setChartData(chartData){
            const ydata = []
            const xdata = []
            for (let item of chartData.rows){
                xdata.push(item['cnt'])
                ydata.push(item['type'])
            }
            const option = {
                yAxis:{
                    data:ydata,
                },
                series:[
                    {
                        data:xdata
                    }
                ]
            }
            this.chart.setOption(option)
        }
    },
    mounted () {
        this.initChart()
        this.getData()
    }
}
</script>

<style scoped lang="scss">
.big-data-container{
    width: 394px;
    height: 300px;
    background: url("/static/img/left_chart_2_bg.png") no-repeat;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
    .header{
        width: 367px;
        height: 46px;
        background: url("/static/img/chart_header.png") no-repeat;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        span{
            color: #FFFFFF;
            font-size: 15px;
            margin-left: 26px;
            margin-top: 5px;
        }
    }
    .chart-body{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        .top-tab{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            .tab-item{
                width: 132px;
                height: 33px;
                background: url("/static/img/tab_item_bg.png") no-repeat;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .title-text{
                    font-size: 15px;
                    font-weight: bolder;
                    color: #FEE400;
                }
                .number-text{
                    font-size: 15px;
                    font-weight: bolder;
                    color: #21CAFF;
                    margin-left: 5px;
                }
            }
        }

        .chart-view{
            width: 100%;
            height: 100%;
        }

    }
}
</style>
